<template>
  <div>
    <el-card class="box-card" v-if="dialog == 1">
      <!-- 面包屑导航 -->
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>基本管理</el-breadcrumb-item>
          <el-breadcrumb-item active>商品管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 添加按钮 -->
      <el-button type="success" style="margin-top: 30px" @click="dialog = 2"
        >添加商品</el-button
      >
            <!-- 搜索 -->
      <div class="search_box">
        <div class="search">
          <el-select v-model="search.right" placeholder="请选择供应商" style="margin-right:10px">
            <el-option
              v-for="item in supplylist"
              :key="item.sid"
              :label="item.supply_name"
              :value="item.sid"
            >
            </el-option>
          </el-select>
          <el-input
            v-model="search.left"
            placeholder="请输入商品名称"
          ></el-input>
          <!-- <el-input
            v-model="search.right"
            placeholder="请输入联系人"
          ></el-input> -->
          <el-button plain @click="searchclick">搜索</el-button>
          <el-button type="warning" plain @click="clearinput">重置</el-button>
        </div>
      </div>
      <!-- 表单 -->
      <el-table
        :data="datalist"
        height="500"
        row-key="cid"
        border
        style="width: 100%; margin-top: 30px; height: 100%"
      >
        <el-table-column prop="gid" label="商品编号" width="180">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="supply[0].supply_name" label="供应商">
        </el-table-column>
        <el-table-column prop="goods_rmb" label="价格"> </el-table-column>
        <el-table-column prop="goods_specs" label="规格"> </el-table-column>
        <el-table-column prop="remark" label="备注"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="warning"
              @click="editDialog(scope.row)"
              icon="el-icon-edit"
            ></el-button>
            <el-button
              type="danger"
              @click="deleteDialog(scope.row)"
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加 -->
    <el-card class="box-card" v-if="dialog == 2" >
      <el-page-header @back="goBack" content="添加商品"> </el-page-header>
      <el-form ref="form" :model="form" label-width="80px" :label-width="'10'">
        <el-form-item label="商品名称">
          <el-input v-model="form.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="form.supply" placeholder="请选择" >
            <el-option
              v-for="item in supplylist"
              :key="item.sid"
              :label="item.supply_name"
              :value="item.sid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="form.goods_rmb" placeholder="单位：￥"></el-input>
        </el-form-item>
        <el-form-item label="商品规格">
          <el-input v-model="form.goods_specs" placeholder="例：300ml"></el-input>
        </el-form-item>
        <el-form-item label="商品备注" >
          <el-input v-model="form.remark" placeholder="例：10/箱"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" plain @click="addGoodsclick">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 修改 -->
    <el-card class="box-card" v-if="dialog == 3">
      <el-page-header @back="goBack" content="修改商品"> </el-page-header>
            <el-form ref="form" :model="form" label-width="80px" :label-width="'10'">
        <el-form-item label="商品名称">
          <el-input v-model="form.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="form.supply" placeholder="请选择">
            <el-option
              v-for="item in supplylist"
              :key="item.sid"
              :label="item.supply_name"
              :value="item.sid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="form.goods_rmb" placeholder="单位：￥"></el-input>
        </el-form-item>
        <el-form-item label="商品规格">
          <el-input v-model="form.goods_specs" placeholder="例：300ml"></el-input>
        </el-form-item>
        <el-form-item label="商品备注" >
          <el-input v-model="form.remark" placeholder="例：10/箱"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" plain @click="editGoodsclick">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addgoods, editgoods, delgoods, searchgoods } from "../../http/api";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      // datalist: [],
      //   添加提示框
      // addDialogVisible: false,
      // editDialogVisible: false,
      dialog: 1,
      form: {
        gid: "",
        goods_name: "",
        supply: "",
        goods_rmb: "",
        goods_specs: null,
        remark: null,
      },
      search: {
        left: "",
        right: "",
      },
    };
  },
  created() {
    this.getgoodslist();
    this.getsupplylist()
  },
  methods: {
    ...mapActions({
      getgoodslist: "goods/getgoodslistActions",
      getsupplylist: "supply/getsupplylistActions",
    }),
    // 确定添加商品
    addGoodsclick(){
      let that = this;
      addgoods(this.form).then((res) => {
        if (res.status == 201) {
          //   that.datalist = res.data;
          that.$message.success(res.message);
          that.getgoodslist();
        } else {
          console.log(res);
          that.$message.error(res.message);
        }
      });

      this.clearDialog();
    },
    //打开修改对话框
    editDialog(data){
      this.dialog= 3,
  this.form={
        gid: data.gid,
        goods_name: data.goods_name,
        supply: data.supply[0].sid,
        goods_rmb: data.goods_rmb,
        goods_specs: data.goods_specs,
        remark: data.remark,
      }
    },
    // 确定修改商品
    editGoodsclick(){
      let that = this;
      editgoods(this.form).then((res) => {
        if (res.status == 201) {
          //   that.datalist = res.data;
          that.$message.success(res.message);
          that.getgoodslist();
        } else {
          that.$message.error(res.message);
        }
      });

      this.clearDialog();
    },
    //删除商品
    deleteDialog(data){
      let that = this;
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delgoods(data).then((res) => {
            if (res.status == 201) {
              //   that.datalist = res.data;
              that.$message.success(res.message);
              that.getgoodslist();
            } else {
              console.log(res);
              that.$message.error(res.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    goBack() {
      this.dialog = 1;
    },
    clearDialog(){
      this.dialog= 1,
  this.form={
        gid: "",
        goods_name: "",
        supply: "",
        goods_rmb: "",
        goods_specs: null,
        remark: null,
      }
    },
    //重置清空
        clearinput() {
      this.search = {
        left: "",
        right: "",
      };
      this.getgoodslist()
    },
    //搜索商品
    searchclick(){
 let that = this;
      searchgoods(this.search).then((res) => {
        if (res.status == 201) {
          console.log(res);
          //   that.datalist = res.data;
          that.$message.success(res.message);
          that.$store.commit("goods/changegoodslist",res.data)
        } else {
          console.log(res);
          that.$message.error(res.message);
        }
      });
    }
  },
  computed: {
    ...mapGetters({
      datalist: "goods/datalist",
      supplylist: "supply/datalist",
    }),
  },
};
</script>

<style lang="less" scoped>
.el-form{
  width: 40%;
  // margin: 0 auto;
}
.search {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-input {
    width: 50%;
    margin-right: 10px;
  }
  margin-bottom: 10px;
}
.search_box {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>